<template>
  <a-layout class="allLayout">
    <a-layout-content>
      <a-spin v-show="isUpload" size="large">
      </a-spin>
      <a-form
        v-bind="formItemLayout"
        :form="form"
        @submit="handleSubmit"
      >
        <a-form-item label="文件">
          <a-upload
            :action="fileAction"
            :data="uploadParam"
            :headers="headers"
            directory
            name="file"
            @change="handleChange"
            :before-upload="beforeUpload"
          >
            <a-button>
              <a-icon type="upload"/>
              选择文件
            </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item label="年份">
          <a-select
            v-decorator="this.validator.year"
          >
            <a-select-option v-for="(item, key) of year"
                             :key='item'
                             :value="item"
            >{{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="区域">
          <a-select
            v-decorator="this.validator.area"
          >
            <a-select-option v-for="(item, key) of location"
                             :key='item'
                             :value="item"
            >{{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="编目">
          <a-tree-select
            v-decorator="this.validator.menuid"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="this.$staticMenu.treeData"
            style="width: 100%"
            tree-default-expand-all
            @change="changeTree"
            :before-upload="beforeUpload"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="类型">
          <a-select
            v-decorator="this.validator.filetype"
          >
            <a-select-option v-for="(item, key) of type"
                             :key='item.value'
                             :value="item.value"
            >{{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="级别">
          <a-select
            v-decorator="this.validator.plevel"
          >
            <a-select-option v-for="(item, key) of level"
                             :key='item.value'
                             :value="item.value"
            >{{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
          <a-button html-type="submit" type="primary">
            确定
          </a-button>
        </a-form-item>
      </a-form>
    </a-layout-content>
  </a-layout>
</template>
<script>
  import {GETALLREGION, GETALLTYPE, GETALLYEAR, IMPORTFILE, UPLOADFILE} from '@/../static/js/apis.js'
  import {importForm} from "@/../static/js/formValidators.js"
  import Global from '@/../static/js/global.js'

  export default {
    inject: ['reload'],                                 //注入App里的reload方法
    data: () => ({
      formItemLayout: {
        labelCol: {span: 6},
        wrapperCol: {span: 10},
      },
      value: undefined,
      label: undefined,
      /*upload文件参数*/
      fileAction: UPLOADFILE.url,   //导入文件提交路径
      year: [],
      location: [],
      type: [],
      level: [],
      validator: importForm,
      pathList: [],
      uploadParam: {
        userId: 1
      },
      isUpload:false,
      fileList:[],
      num:0,
      finishNum:0,
    }),
    beforeCreate() {
      this.form = this.$form.createForm(this, {name: 'validate_other'});
    },
    watch: {
      value(value) {
        console.log(value);
      },
    },
    methods: {
      /*获取静态数据*/
      getStaticData() {
        let self = this
        GETALLYEAR('', function (res) {
          self.year = res.obj.slice(1)
        })
        GETALLREGION('', function (res) {
          self.location = res.obj.slice(1)
        })
        GETALLTYPE('', function (res) {
          self.type = res.obj.slice(1)
        })
        this.level = this.$staticMenu.level.slice(1)
      },
      handleSubmit(e) {
        let self = this;
        if (self.pathList.length == 0) {
          self.$message.error(`请上传文件`);
          return false
        }
        e.preventDefault();
        self.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            values.pathList = self.pathList
            values.menuName = self.label
            values.userId = 1
            IMPORTFILE(values, function (res) {
              self.$message.success(res.message);
              self.reload()
            })
          }
        });
      },
      beforeUpload(file,filelist) {
        //console.log(filelist);
        //this.fileList = [...this.fileList, file];
        this.fileList = filelist;
        if(filelist.length>Global.maxFileNum){
          // if(this.num ===0){
          //   this.$message.error("文件数量超出限制！")
          // }
          return false;
        }else{
          this.isUpload = true;
        }

      },
      handleChange(info) {
        // console.log(info);
        if (info.file.status !== 'uploading'&& this.num === 0) {
          //console.log(info);
          if (this.fileList.length > Global.maxFileNum ) {
            console.log(1111);
            this.num++;
            this.fileList=[];
            this.$message.error("文件数量超出限制！")
            return false;
          }
          // else if(this.fileList.length > Global.maxFileNum){
          //   return false;
          // }
        }/*else if(info.file.status === 'error'&&this.num !== 0){
            this.num =0;
         }*/

        if (info.file.status === 'done' && this.fileList.length<=Global.maxFileNum) {
          //this.isUpload=false;
          this.$message.success(`${info.file.name} 上传成功`);
          this.fileList=[];
          this.num = 0;
          this.finishNum++;
        } else if (info.file.status === 'error' && this.fileList.length<=Global.maxFileNum) {
          this.$message.error(`${info.file.name} 上传失败`);
          this.fileList=[];
          this.num = 0;
          this.finishNum++;
        }

        if((info.file.status === 'done'||info.file.status === 'error')&& this.finishNum===info.fileList.length){
          console.log(this.num);
          this.isUpload=false;
          this.finishNum=0;
          // this.num = 0;
        }


      },
      changeTree(value, label) {
        this.label = label[0]
      }

    },
    computed: {
      headers () {
        return {
          "token" : localStorage.getItem("token")
        }
      }
    },
    created() {
      this.getStaticData()
    }
  };
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allLayout {
    margin: 30px;
  }

  .ant-layout-content {
    background-color: white;
    padding-top: 30px
  }
  .ant-spin-spinning {
    height: 300px;
    width: 600px;
    background: #eeeeee91;
    line-height: 200px;
    position: absolute;
    z-index: 1000;
  }
</style>
